<template>
    <div class="about">
        <el-row style="height: 400px;">
            <el-col align="center" style="line-height: 70px;">
                <h1> 演示组件通信: provide/inject</h1>
                <h2> 祖父组件 曹操 </h2>
                <h3> 来自后代的消息：{{ messageFromDescendant }}</h3>
                <el-space>
                    <el-input v-model="familyMessage" style="width: 350px" placeholder="请输入要传递给后代的消息" />
                </el-space>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <CaoPi></CaoPi>
            </el-col>
            <el-col :span="12">
                <CaoZhi></CaoZhi>
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts" setup>
import { ref, provide, readonly } from 'vue'
import CaoPi from './CaoPi.vue'
import CaoZhi from './CaoZhi.vue'

const familyMessage = ref('-v-')
const messageFromDescendant = ref('')


provide('family-message', readonly(familyMessage))

provide('update-grandpa-message', (msg: string) => {
    messageFromDescendant.value = msg;
})

</script>

<style>
.about {
    line-height: 2;
    background-color: white;
    height: 90vh;
}
</style>